IML FACILE 


الحمد لله والصلاة والسلام على اشرف المرسلين وعلى اله وصحبه اجميعن. 

أما بعد: 

فاسمحوا لي احبتي ان اقدم لكم مجموعة دروس من اعدادي حول لغة ا١1۲‏ . مقدمة بشكل سهل ومبسط. وهي خلاصة دورة كنت قد 
قدمتها في مواقع عربية بعضوية (00۵۳ ,08461 ).حيث يمكن «ي شخص ان يستفيذ من هذا الكتاب ويكون بدايته الى عالم لغات البرمجة 
الخاصة بتصميم صفحات الويب. 


TASSINE ABOUCHRIF 


الى كل الذين رافقوني في جميع محافل العلم الختلفة. 
الى كل قارئ لهذا الكتاب 

اليهم جميعا 

اهدي كتابي المتواضع هذا. 


فهرس 


الدرس الاولى : مقدمة حول ا17۷1 
الدرس الثاني: صفحتي الاولى ب 11١1‏ 
الدرس الثالث: خصائص النص 

الدرس الرابع: اللوائح 

الدرس الخامس: الصور والروابط 

الدرس السادس: الجداول - ج -١‏ 

الدرس السابع: الجداول - ج ۲ - 


الدرس الثامن: ااسثمارة Formulaire‏ 


الدرس الأول 


مقدمه حول عة اhtm‏ 


HTML 
ليس بالغريب ان يتبادر الى اذهاننا ونحن نتهجاً في حروف هاته الكلمة اول مرة.‎ 
إشكال حول معنى هاته الكلمة او بشكل صحيح معنى هاته الحروف‎ 


۳ 5 3H T 


وكتعريیف مصطلح 

فهاته الحروف هي اختصار ل جملة: 

Hypertext Markup Language 

وتعني ببساطة لغة وصف للنص تستخدم وسوم 

(هءااهط بالفرنسية اما بالاجليزية فيطلقون عليها اسم كوها) 


معروفة (الوسوم) لدی متصفح الانترنت متثل: 
mozila‏ . 


وينبغي الاشارة ان لغة 
ا11 ليست بلغة برمجة بهذا المعنى مثل لغة +٥‏ والجافا 


ولكن HTML‏ #اتتعدى کونها وسوم تعطي شکلا للنصوص والصور. 


لحد الان اعتقد انه مازال هنالك شيء من الغموض حول هاته اللغة 
ظبب 

لاتقلقوا حول ذلك سنفهم اكثر فيمايلي 

فابقوا معنا ولاتذهبوا الى اي مكان اخر. 


طبعا كلكم تدخلون النت؟ وتعرفون موقع جوجل؟ 


ماهذا السؤال يا ياسين ؟ وكيف كانوا سيرون موضوعك هذا إذا لم يكونوا متصلين بالنت . ثم هل هناك شخص اليوم لايعرف موقع جوجل 


الضخم!!!! 
لو سألت اميا لايعرف القراءة ولا الكتابة عن جوجل يقولك ذا عمي وابويا واخويا وحبيب الكل . 


عفو صديقي اردت ان اشير الى الصفحة الرئيسة للموقع. كيف هي مرتبة وبسيطة وجميلة جدا.. 
النصوص ظاهرة والصور كذلك 

وكيف ان الروابط فعالة 

حتى في التموضوعات جد كل شيء في مكانه ولايتزعزع .تابث 

وكل تام .٠٠٠*٠٠١‏ 


طيب عمرك سألت كيف تم كل ذلك 
Google‏ 
بيطلعلك صفحة جميلة ومتناسقة!!! 


ماذا لو اخبرتك ان الموقع يبدا باحد وسوم ا٣۳٣‏ يعني الموقع يستخدم ا٣"‏ 
شيء مثير ألا توافقني الرأي. 
اذن اعلم وبكل بساطة ان ا17۸ تصف لك محتوى موقعك 


يعني تقوم بتعريف محتواك للمتصفح حتى يترجمها للزائر 
فتظهر له. 


اضف الى ذلك ان ا١1۳‏ هي لغة الاساس التي وجب معرفتها حتى مكنك التعمق اكثر في مجال برمجة المواقع. 


الوسم هو «امر او تعليم او وصية او ارشادية» 

يكتب بين هذين الرمزين: < > 

(رمز اكبر ورمز اصغرا) 

وهو ملك اسما واحيانا صفات تعرفه. 

والذي يجب ان نعرفه اكثر هو ان معظم التعليمات او الاوامر في ا١1۲‏ 
لها وسم بداية يكون بين هذين الرمزين <الوسم> 

ووسم نهاية يكون بين هذين الرمزين </الوسم> 

مع ملاحظة الفراق بين الوسمين الذي يكمن في الرمز:/ 

مثال: 


بدابة الوسه التضن .. «انهاية الوه > 


ملحوظة : هناك بعض الوسوم في ا17۸۷ ليس لها وسوم نهاية سنتعرف عليها مستقبلا. 


<TAG> TEXT </TAG> 


ماذا سنحتاج للدخول في تعلم هاته اللغة؟ 


لن نحتاج لشيء كبير كل ما يجب توفره اعتقد انه موجود في اغلب الأجهزة: 
- متصة e‏ 
(INTERNET EXPLORER OR MOZILA OR NETSCAPE OR SAFARI...)‏ 


-محرر اکواد H7۷1‏ 


(NOTEPAD OR BLOC NOTE ...) 


وهذا كل مافي الامر. 


HTML > 4 صفحتى‎ 


طبعافيما سبق عرفناان لغة اM‏ 3 تستعمل وسوم للتعريف بعنصرر(امر) او خاصية معينة حتى يظهر لنا المحتوى الذي بين وسم البداية 
ووسم النهاية بالشكل الذي نریده. 


والان سنتعرف على اول امر تبتداً به صفحة ا1۲1 : 
كود اhim:‏ 


<html>...</html> 
.HTML اننا سنتكکلم معه بلغة‎ (navigateur) ووظيفة هذا الامرانه يخبرالمتصفح‎ 


ولاحظ معي اننا في كتابة الامر استعملنا وسما للبداية ووسما للنهاية. يعني كود او لغة )1۲۸ ستكون بين الوسمين. 
يبقى لناان نعرف الان ماذا يكون بين هذين الوسمين . 

قبل ذلك اود ان اوضع ان صفحة ا١1۳‏ تكون مكونة من جزئين اثنين : 

-جزء یسمی بالرأس او مايصطلح عليه ب :1۴۸0 وهو مثابة تعريف للصفحة. 
-وجز اخر يطلق عليه الجسم : 805۷ اي محتوى الصفحة. 

من هنا نعرف الصيغة العامة ل لغة 1۲1 ب: 


كود اhim:‏ 


<html> 

<head> 

<title> 
عنوان الصفحة‎ 
<Ititle> 
</head> 


<body> 
الحتوى الذي نريد ان يظهر في الصفحة.‎ 
</body> 
</html> 


وهاته الصيغة اريد من الجميع ان يحفظها عن ظهر قلب 
ليست بالشيء الصعب اكيد واراهن على ان الجميع سيحفظها ان شاء اللّه. 


طيب دعونا الان مر لتطبيق ماخدثنا عنه فلقد تعبنا من الكلام ونريد ان نرى الافعال.. 


في الدرس الاضي قلنا اننا سنحتاج الى محرر اكواد 

حتی نکتب فيه اکواد ۳1ا .. 

طبع الكل حر في استخدام الحرر الذي يريده لكن انا احبذ بالنسبة للذين لم يسبق لهم تعلم هاته اللغة ان يستعملوا الحرر العادي 
الموجود في الويندوز: 

notepad (bloc note) 

( 

لفتحه نتبع المسار التالي 

start--- all programms--- accessoires--- Notepad ) 


وخبيذي لهذا الحرر نظرا انه سيجعلكم تكتبون كل الاكواد يعني في نفس الوقت ستحفظونها عن نظهر قلب بسهولة تامة 


ودعونا نلتزم بشيء ك لاتقوموا بنسخ ولصق اي كود طرحته لكم اعيدوا كتابة الكود بايديكم ولكن شعارنا في ذلك علمني كيف اثقن لغة 
html‏ 


وليس اعطيني لغة ۲۲۲1 او اكواد "٤٣١‏ 


اأوك.. الان نفتح محرر الكتابة dأ2مع†no‏ 
بعد ذلك نكتب الكود التالى: 


كود اhim:‏ 


<html> 

<head> 

<title> ma premier page html</title> 
</head> 


<body> 
html est un langage de description qui utilise des marqueurs et permet de faire de navigation. 


</body> 
</html> 


الان سنسجل العمل فنظغط على : 8+ا٣†ه‏ او نختار اأ ثم الأمر 52۷6 


لاتتسرع هاته المرحلة ايضامهمة 

نضع اسم لا نريد تسجيله ونضيف بعد الاسم : 

.html 

مثال: 

pageا.html‎ 

ثم نختار مكان الحفظ ونضغط اوكي. 

نذهب الى الملف الحفوظ وسنجد انه يحمل ايقونة المتصفح المستعمل لدينا مثلا انا استخدم المتصفح internet explorer‏ 
ساجده هکذا: 


فتفتح لدينا صفحة انترنت بها: 

الجملة : 

html est un langage de description qui utilise des marqueurs et permet de faire de navigation. 
ma premier page html : ولاحظ ايضا عنوان الصفحة في راس الصغفحڌ‎ 


وهاته صورة توضح ذلك. 


Nen‏ - ضقحتی الاولی ی اش تی اہ ال ق 


rês :#[ C:\Documents d Settings XPPRESP 3 Desktop page 1. html 
1 2 
قسم البرمجة القياسية وتطوير المواقع‎ 
دورة علمني كيف اثقن لغة 1اصا‎ 
3 
EE آ۱ ا اا‎ 3 My: Computer 


طبعا اضفت عليه بعض الوسوم الأخرى لأخكم في حجم الخط وفي عملية الرجوع الى السطر 

سوف نتعرف عليها ان شاء الله فى دروسنا القادمة 

اتضا جوت الس فخةغرية. ` 

ب كوو اتن سن اتبمن ا اتبا 

وهذا سؤال طرحه احد الاخوة في الدرس الأول وما انني وعدته بالاجابة فسأفي بوعدي نظرا لان سؤاله في غاية الأاهمية وكم احب ان اجد مثل 
هذا السؤال الذي يساهم في تقدم الدورة ويدل ايضا على توغ من الاهتمام. 

وكجواب هو اني اضفت في وسم البداية المتعلق ب ۳١‏ امر يجعل النص يكون من اليمين الى اليسار هذا الامر هو : ا٣۲«٣أل‏ 


فکتبته هکذا: 
كود اhim:‏ 
<html dir=rtl>‏ 


ثم اتقمت الباقي كماهو معروف. 
وكملحوظة: ايضا من اجل ان جعل النص من اليسار الى اليمين نكتب وسم بداية ١ا۳‏ هكذا: 


:PHP كود‎ 
<html dir=ltr> 

ولكن لان هذا الامر جعل هو الامر الافتراضي فعادة لايتم كتابته. 
اعلاه صفحة التطبيق: 


بعض الملاحظات: 


رقم :١‏ عنوان الصفحة لاحظ معي انه يوجد باعلى الصفحة . فكل تلك المنطقة الزرقاء تسمى ب: "٠۵۵‏ 

-رقم : وهو رابط الصفحة يعني مكان واسم الصفحة المسجلة . لاحظ انها ختمت ب رمز ۸۲١١.‏ 

-رقم :١‏ وهو كل المنطقة البيضاء ما فيها الحددة التي تضم الحتوى (عبارة عن نصوص) 

-ملحوظة اخيرة وهي ان جميع اكواد ۲۲۳١‏ تكتب بحروف صغيرة . قد نستعمل حروف كبيرة او ندمج بين الصغيرة والكبيرة فيكون الامر عادي 
لكن المشاكل تظهر في بعض المتصفحات الاخرى في هاته الحالات الاخيرة من الكتابة لدى وكقاعدة لتكن جل الحروف صغيرة. 


خصائص النصوص : 


ففي فقرتنا هاته سوف نتعرف على كفية انشاء صفحة سهلة جدا وميزة . 
ولنبداً باول خاصية: 


-١‏ الالوان: 


الحديث عن الالوان متشعب نظرا #ختلاف وتشعب مسألة الاذواق . لكن يكفي ان نعرف ان للالوان دورا مهما في اعطاء جمالية للنصوص 
(لكن لاتبالغوا فيها هههه ) 


كود اhim:‏ 
<« اسم اللون«=۲٥|اco <font‏ 
النص او الكلمة المراد تلوينها بلون معين 


</font> 
طبعا اسم اللون انكتبه بالعربية . ولكن هناك طرق ثلاثة لكتابة اسم اللون الذي نريده:‎ 
. -الطريقة الاولى: وهي طريقة تسمية الالوان بأسمائها في اللغة الاجليزية‎ 


-الطريقة الثانية:تتم ت اکواد الهيكساديسيمال 
hex‏ وهي تقنية تمكننا من الخصول على العديد من الالوان 
متال لكود ×16 بالنسبة للون الاحمر: 


Hf. 
هذا الكود يعطينا اللون الأحمر و«حظ كيف تمت كتابة الكود حيث ان كود ×16 يتكون من 1 احرف او ارقام بشرط ان الحروف محدودة يعني غير‎ : 


والترتيب هو 
۰“۱TTf01VA4abcdf‏ 


ملاحظة ثانية: ان كود الهيكساديسمال يتكون من 1 خانات كما نرى (طبعا باستثناء التي توجد فيها علامة ديز: 
)# 

فالخانة ١‏ و الخانة ١‏ (جهة اليسار) خاصة باللون الاحمر كلما كانت القيمة كبيرة نحصل على الاحمر (اعلى قيمة هي : ) 
اما الخانة ۲ و٤‏ فهي خاصة باللون الأاخضر إذن اذا اردنا كود الهيكساديسمال الخاص ب الأاخضر يكون هكذا: 

° #ff °° 


الخانة ۵ 9 الخانة 1 : اللون الازرق. والكود 


وهذا جدول يضم مجموعة من الالوان واكودها: 


Anti quewhite Alicebluıe 
#FFAEBDT #FOFBFF 
marin 


Beige Azure 


FFSFSDC FFOFFFF 


Bisque 


Blanchedalmond Black ise 
#FFEBCD #000000 #FFE4C4 


Blue 
#OOOOFF 
e | N 1 
Lornsilk 
FFFFEDC 


يمكننا طبعا ان نحصل على اي كود لاي لون باستخدام برامج التصميم مثل الفوتوشوب او غيرها من البرامج التي توفر لنا هاته الامكانية. 


الطريقة الثالثة لن اذكرها حاليا ساتركها حتى نبدأ ان شاء الله في تقنية 088 (دروس اخرى سنجمعا بحول الله في كتيب اخر 


يمكنناان نتحكم في حجم النص واقصد بالحجم 


la taille or size the text 


عن طريق الوسم التالي : 
كود اhim:‏ 
<«القيمة»=size <font‏ 


النضن .: 


<lfont> 


۳- اسم الخط او نوعيته: >|4٥6<‏ 

هاته الخاصية تسمح لنا بأن نختار اسم الخط الذي نريد ان يظهر به نص معين وتكتب هكذا: 
كود اhim:‏ 

>]0۸٤/< ... =»اسم الخط «> النص‎ 0n fa €< 


ويرجى كتابته كما هو مسجل في الويندوز يعني الحروف الصغيرة صغيرة الحروف الكبيرة كبيرة. 


و #شكل:التض ٠‏ 


لدينا هنا بعض الخصائص التي جعل من النص غليظ او مائل او خثه سطر او مشطوب. سنذكر الوسوم الخاصة بها: 


:PHP كود‎ 

<> نص غليظ ۵/> dامط>‏ 
كود اhim:‏ 

<em> 

تنص مائل sisئempha‏ 
<lem>‏ 

او 

<İ> 

نص مائل eںوااھاا‏ 
</i>‏ 

كود اhim:‏ 

<U> 

</IU> 


- للحصول على نص عليه سطر او مشطب عليه: 


:himا كود‎ 
<S> 
</S> 


۵- العناوين: 


في 
١‏ اذا اردنا ان جعل من نصوص معينة عناوين لفقرات في صفحتنا 


يكفي ان نعطيها خصائص من التي رأينها لحد الان فنجعلها مثلا ذات لون مختلف عن باقي النص نعطيها ايضا حجما كبيرا وجعل خط 
خثها (سطر) 

لكن هذا ليس الشكل المعروف للعنوان في ۲١١‏ فالعنلوين لها وسم خاص يميزها وحتى يسهل ايضا الوصول اليها في داخل الكود 

لدى اي عنوان اقصد اي نص نريد ان خعل منه عنوانا لفقرة معينة فلنضعه هكذا: 


كود اhim:‏ 

<۱> عنوان 

</h)> 

hl 9h 

اصغر حجم هو 
ارجم فوا 


آ- جهة التصض أو الفقرة 


من الخصائص الجميلة الموجودة في لغة 
ا اننا يمكننا ان نتحكم في الجهة التي يكون فيها النص او الفقرة 
فإذا اردنا ان جعل النص في جهة اليمين يكفي ان نستعمل الوسم التالي: 


كود اhim:‏ 

>»p align =»right>‏ الفقرة </م> 
- جهة اليسار: 

كود اhim:‏ 

<p align =»left»>ةرقفلا‎ </p> 


- الوسط : 
كود اhim:‏ 


>Pص/<‎ ةرقفلا>»p‎ align =»center> 
1و‎ 
<center> ةرJãall‎ </center> 


: justifier - 
:himا كود‎ 


<p align=»justifJ»> انلفقرة‎ </p> 


- في حالة الرغبة في الرجوع الى السطر نستعمل الوسم التالي وراء اخر كلمة نريد ان يرجع بعدها الجر الى السطر 


<Dr> 


- وضع سطر: 

الوسم التالي الذي يعطينا سطر: 

كود اhim:‏ 

<hr width=»???» size=»???» COIOr=»???»> 

لدينا الحق طبعا في وضع التغيرات التي تناسبنا للحصول على سطر بالطول المرغوب به والسمك وايضا اللون 
- اخيرا وليس اخيرا وسم عمل مسافة بین كلمتين 

لاحظ انك لا تكون تكتب نص معين في محرر الاكواد حتى لو قمت ب وضع 

espace‏ مسافة كثيرة 

يعني ضغط على ٠5٥4٥١‏ العديد من المرات محاو* ان جعل المسافة بين كلمتين بعيدة 

فلن يقوم المتصفح بترجمة كل تلك المسافات بل سيعتبرها ان مجرد ضغطة واحدة على 6503٥06‏ اي مجرد مسافة واحدة 
لكن هناك وسم يسمح لنا باضافة اكثر من مسافة بين كلمتين هذا الوسم هو: 


:himا كود‎ 
&nbsp; 


كلما كررت هذا الوسم بين كلمتين اكثر كانت المسافة بينهما اطول. 


الدرس الرابع 


اللوائشسح 


اللوائح هي شكل من اشكال عرض النصوص. وعادة اللوائح تستخدم للعوارض المهمة. وسنتعرف على نوعين منها: 
-النوع الاول 


هو لوائح تستخدم اشكال (قرص. دائرة. مربع) معنى انك جد قبل النص شكل معين. مثال: 


Liste n°1 Liste n°2 Liste n°3 
# text] o text Î m text Î 
# text 2 2 text 2 m kext 2 
# text 3 2 text 3 m text 3 
#* text 4 © feRt4 m text 4 
# Text 3 o text 3 m= text 3 


الشکل 3 الشكل ك الشكل 1[ 


الان سنتعرف على الوسم الخاص بهذا النوع من اللوائح: 
كما نلاحظ من خلال المثال السابق جد تلاث اشكال من اللوائح لدى سأضع بين ايديكم ثلاثة وسوم: 


الوسم الاول: وهو الوسم الخاص ب الشكلا: 
كود اhim:‏ 


<ul type=”disc”> 
<li> text | </li> 
<li> text f </li> 
<li> text Û </li> 
<li> text £ </li> 
<li> text ۵ </li> 


<lul> 


الوسم الثانى : الشكل ۲ 


كود اhim:‏ 


<ul type=»circle»> 
<li> text | </li> 
<li> text f </li> 
<li> text F </li> 
<li> text £ </li> 
<li> text ۵ </li> 


<ul> 


الوسم الثالث : الشكل٣‏ 


كود اhim:‏ 


<ul type=»square»> 
<li> text | </li> 
<li> text f </li> 
<li> text F </li> 
<li> text £ </li> 


<ul> 
كملا نلاحظ فجميع الاشكال لها نفس الوسم تقريبا فقط الشيء الوحيد الذي يتغيير هو ٥م1۷.. اي نوع الشكل.‎ 


د التوع الفاتى 


من انواع اللوائح هو عبارة عن لوائح تستخدم ارقام أوحروف. وتعتمد الترتيب مثال: 


Liste n1 | Liste n2 Liste n3 Liste n4 


1l. fex Î AU. text l aA. exî A4. tex 
A. ERÎ AT.. ‘tent 2 b. text 2 EB. text2 
3. text 3 A. tex 3 rz. fex 3 C tet 3 


4#. text 4 2A3. text4 dd. text 4 DO. text 4 


الشكل 3 الشكل 2 الشكل ا الشكل 1 


وسم الشكل الاول: 


كود اhim:‏ 


<ol type=»)»> 
<li>text)</li> 
<li>text </li> 
<li>textT</li> 
<li>text2</li> 


</ol> 


الرقم المراد مثلا نريد ان يبدأ العد من :۲١‏ 
<ol type=»)» start=» 1 * »>‏ 
(الشكل أ) 


كود اhim:‏ 


وسدم الشكل الثالث: 


كود اhim:‏ 


<ol type=»a»> 
<li>text)</li> 
<li>text </li> 
<li>text</li> 
<li>text£</li> 


</ol> 


<ol type=»A»> 
<li>text)</li> 
<li>text </li> 
<li>textT</li> 
<li>text2</li> 


</ol> 


الدرس الخامس 


الصور والروابط 


مقدمة : 


في هذا الدرس ان شاء الله سنتعرف على كيفية اضافة صور الى صفحتنا كيف جعل صورة عبارة عن خلفية . وسنعرف ايضا كيف سنتحكم 
في بعض خصائصها .. ثم ننتقل بعد ذلك الى الحديث عن الروابط (ك١‏ ءا sها)‏ 


حيیث سنتعلم کیف نضيف رابط وکیف تنربط بين صفحات متعددة .. الدرس سیکون مهما لدی ارجوا من الجميع الانتباه ومحاولة قرأت الدرس 
اكثر من مرة حتى يتم الاستعاب ان شاء الله.. 


اضافة صورة ال صفحتی: 


من الاشياء التى جعل من صفحات الانترنت التي نبرمج اكثر جمالية وبهاءا هى الصور.. فالصور لها دلالات متعددة واستخدامها يضيفى لمسة 
سحرية على الموقع... لسن هذا فقظ فاخبانا قك ترب نحن باضافة صورة الى صفحتنا بسبب او بدون .. فكيف السبيل الى ذلك في HTML‏ 
الامر بسيط. حيث يتم باستخدام وسم الصور هذا: 

كود اhim:‏ 

<» اسم الصورة.صيغة الصورة «=١٥٠8۲؟‏ وصأ> 

لنأخد مثال : نريد ان نضيف صورة صيغتها ومز واسمها ١عوه"ا‏ 

اذن سنضف في 000۷ هذا الوسم: 


كود اhim:‏ 


<«jpg.img src=»imageا‎ > 


مع شرط واحد وهو یجب ان تكون الصورة في ملف (folder)‏ 
واحد مع صفحة اصاh.‏ 


لكن ماذا لو كانت الصورة فى ملف وصفحة ا۳٣‏ فى ملف اخر أليس هنالك سبيل لربط بينهما؟؟.. 


طبعا هناك وسيلة للربط بينهما يكفي ان نحدد مكان الصورة بالتدقيق داخل صفحة ا٣ا‏ 
ولنفترض في مثالنا السابق ان الصورة موجودة في ملف اخر اسمه sعوج"i‏ sمm‏ 


:himا كود‎ 
<img src=»mes images/image).jpg»> 


خصائص وسم الصور: 
من الاشياء او الخصائص التي مكننا التحكم فيها عندما نضيف صورة هي: 


«???«=1۸لWİ0‏ >== العرض: وهو عرض الصورة 
«???«=اhوhei‏ >== الطول: او الارتفاع 
«?«=۲عل0۲ط >== :الاطار او الحاشية 


الاسم: وهو اسم او معلومات جعلها مخفية ولاتظهرالى عندمايقع مؤّشر الماوس فوق الصورة ==< 
alt=»nom ou info»‏ 


متال . نريد ان نتحكم في جل الخصائص اضافة صورة لدی سنجمعها كلها داخل وسم الصور: 


كود اhim:‏ 


<img src=»image).jpg» width=» ° *» height=»1 0۰» border=»F» alt=»nature»> 


جعل صورة بمتابة خلفية لصفحتنا: 


كيف يتم ذلك الامر بسيط كذلك كل ماعلينا هو ان نضيف داخل وسم ١0ط‏ هاته |lخاصيa: background‏ . 


:himا كود‎ 
<body background=»image!.jpg»> 


لكن ماذا لو رغبت في جعل خليفة صفحتي بلون معين .. يعني اريد ان اغير الليون الافتراضي للصفحة الذي هو الابيض الى الاخضر مثلا.. هل 


اصمم صورة بلون اخضر واستخدم الوسم السابق؟؟؟ 

نعم هذا صحيح ولكن يستحسن استخدام طريقة اخرى سهلة تغنينا عن تصميم صورة لونها اخضر 
كود اصhi:‏ 

<«اسم اللون الذي ترید«=۲٥0۱0ءcوط>‏ 


مثال : نريد اللون الأاخضر إذن: 


كود اhim:‏ 


<bgcolor=»green»> 


الروابط او 

les liens (links) 

تكون دائما معرفة بكائن (نص او صورة) يسمح بالقيام بعملية الربط بين صفحات الانترنت. 
ومن اجل هميل صفحة انترنت يجب ان نضغط على الرابط او الكائن الذي يخبئ بداخله رابطا يدل على اسم ومكان الصفحة المراد خميلها .. 
حيث ينتج عن هذا الحدث الأاخير خميل الصفحة بنجاح او عدم خميلها إثر وجود خطأ في اسم او مكان الرابط. 
وحتى نشرح اكثر الامر سنأخذ مثالا بسيطا 

نفترض انك الان في الصفحة الرئيسية لمنتدياء الضوء الفلاش 

طيب تريد الان الولوج الى قسم لغات البرمجة القياسية 


نلاحظ انه في الصفحة الاولى اي الرئيسية يوجد كائن عبارة عن نص: «لغات البرمجة القياسية» 
وعندما نقوم بالضغط على هذا الكأئن الذي يحتوي بداخله على رابط يعرف الصفحة المراد الانتقال اليها اي صفحة قسم لغات البرمجة 
القياسية (الصفحة ؟) 

نلاحظ انه تم وبنجاح خميل الصفحة ١‏ فنرى المواضيع الموجودة في القسم 

وهذا يعني اننا قمنا بربط الكائن او النص : «لغات البرمجة القياسية» بالصفحة ۲ 


طیب کیف مکننا عمل «رابط» ؟؟؟ 


في ٣۳١‏ نتوفر على وسم لعمل ذلك ببساطة حيث ان الامر #يتطلب منا سوى اسم ومكان الصفحة المراد خميلها. 
الوسم: 


كود اhim:‏ 
<«رابط الصفحة المراد التوجه اليها«١؟۲۴"‏ ه> 


الكائن حينما نضغط عليه سيقوم بتحمل الصفحة ال مراد التوجه اليها 
</a>‏ 
في منطقة ر١هط‏ نضع هذا الامر: 


كود اhim:‏ 

<a href=»www.google.co.ma»> Jجgج‎ gaan </a> 

سوف جد جملة موقع جوجل اصبحت عبارة عن رابط وعن الضغط عليها ستظهر صفحة موقع جوجل. 

هذا في حالة اردنا خميل صفحة موجود على الانترنت. لکن ماذا لو اردنا خميل صفحة موجودة فقط في حاسوبنا؟؟.. 

الامر سهل هو الأخر كل ماعلينا ان نضع اسم الصفحة المراد خميلها 

ولنفترض انه لدينا صفحتين :الاولى اسمها ١ءوهم.١۳٣أ٣‏ وستحتوي على الرابط الذي سنقلنا الى الصفحة الثانية التي اسمها ع وaم.!ntm‏ 


:himا كود‎ 
<a href=»page1.himl»> ةينlثلا الصفحة‎ </a< 


کماء يمكنناايضاان نضع في ١‏ لصفحة الثانية نفس الوسم مع ب بعض التغيرات فقط فنكتب: 


:himا كود‎ 
<a href=»page|.himl»> الصفحة ا«ولنى‎ </a< 


وبهذا سوف نتنقل بين الصفحتين معا من الصفحة ١‏ الى الصفحة ۲ ومن ۲ الى .٣‏ 


بدأنا في المهام الصعبة ههههه (# # #... ان شاء الله سهلة) 


اول شيء يجب ان نحدده هو ماذا سيكون في موقعنا (على فكرة هذا مجرد تطبيق بسيط للاشياء التي وصلنا اليها لحد الان وان شاء الله 
سوف نتعمق اكثر في الحديث حول الخطوات الاأساسية في انشاء موقع خاص) 

اذن ماذا سنحتاج في موقعنا؟ 

كل موقع يحتوي على صفحات متعددة حتى يمكن التنقل فيما بينها . ونحن هنا سنجعل موقعنا يحتوي على ۲ صفحات (الذي يعرف اجاز ۲ 
صفحات باستطاعته ینجز اکثر من ۳) وسنسمیها: 

- الصفحة الاولى =الرئيسية=> home.ht ml‏ 

الصفحة الثانية =بطاقة تعريفية=> biography.hml|‏ 

الصفحة الثالثة =-معرص صور=< |" galery.‏ 


نبدأ على بركة الله في انشاء صفحاتنا لكن قبل ذلك دعونا ننشئ ملف اقصد 0106۲ حتى جمع فيه جل الصفحات 


الان مع الصفحة ا¥اولى: home.html‏ 
كود اصhi:‏ 
<html dir=»rtl»>‏ 
<head>‏ 
<هااآأ/> دورة علمني كيف اثقن لغة اش تي ام ال <eاازا>‏ 
</head>‏ 


<body> 

<center> 

<img src=»image).png»> 
<br><br><br> 

<font size=»l» > 

<a href=»home.htmا|»>ةيwسيأڼرنا</a>‎ 


&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &n bsp; &nbsp;&nbsp;&nbsp;&n bsp;&nbsp;&nbsp; 


<a href=»biography.hm|»>ةèيرعت‎ ةقlطب</a>‎ 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &n bsp; &nbsp;&nbsp;&nbsp;&n bsp;&nbsp;&nbsp; 


<a href=»gallery.h1m|»>رgصږڏ معرض‎ </a> 
</font> 
<br> 


<br> 


<hا>‎ 
<font color=»VV#aacc»><b> 


:رسالة ترحيب 


</b> 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n bsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &n bsp;&nbsp;&nbsp;&nbsp;&n bsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &n bsp; &nbsp;&nbsp;&nbsp;&n bsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&n bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n bsp;&nbsp;&n bsp; 

</font> 

</h)> 

<P> 

<font size=»0»> 

السلام عليكم ورحمة الله وبركاته 

<Dr> 

ارحب بكم فى موقعى الشخصى ا*ولى واتمنى لك قضاء اجمل الاوقات هنا 

<Dr> ٠ ٠ ٠ 

كل التراحيب و التحايا # تعبرعن مدى سروري بطلتك 

<Dr> 

فها هي ايادينا مدها لك ترحيبا وحفاوه آملين أن تقضي بصحبتنا 

أسعد و أطيب الأوقات 


<Dr> 

تقبل منا أعذب وارق خايانا 

<Dr> 

وشكرا على الزيارة نتمنى أن تتكرر .. 
<Dr>‏ 

في امان الله 


</font> 
</p> 


</center> 
</body> 


</html> 


نسجل الصفحة ا%ولى ڊlسsw: home.html‏ 

ونضعها داخل الى ال ١١۵اه]‏ المنشئ وهكذا انتهينا من الصفحة الاولى (كل واحد حر في محتوى الصفحة) 

الان نذهب الى الصفحة لعانيتها 

نلاحظ ان کل شيء تام وإذا جرينا الضغط على احد الروابط الموجود بالصفحة سنحصل على صفحة خطأ تؤكد استحالة خميل الصفحة 
المرادة نها غير موجودة 

وطبعا هي غير موجودة لدى سننشئها الان 

يكفي ان نذهب الى الصفحة الاولى ونعمل نسختين منها ن ونعطي احدى النسختين اسجa: galery.html :awl aرëخ>lg biography.html|‏ 
بعد ذلك نفتح الصفحة أ"٣.۷رامهاوهاط‏ بواسطة محرر اكواد ا٣ا"‏ او عن طريق كليك مين فوق الصفحة واختيار الامر اال 

(مانريده الان هو تغيير محتوى الصفحة حتى يختلف عن محتوى الصفحة الاولى) 

إذن كود الصفحة الثانية سيكون هكذا بعد التغيرات المرادة: 


كود اhi۳:‏ 


<html dir=»rtl»> 

<head> 

<e!اi1/>‏ دورة علمني كيف اثقن لغة اش تي ام <title> J|‏ 
</head>‏ 


<body> 

<center> 

<img src=»image).png»> 

<br><br><br> 

<font size=»l» > 

<a href=»home.htm|»>ةيwسيأرنا</a>‎ 

&nbsp;&nbsp;&nbsp;&n bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &n bsp; &nbsp;&nbsp;&nbsp;&n bsp;&nbsp;&nbsp; 


<a href=»biography.him|»>ةيdيرعپت‎ ةقlطۍطب</a>‎ 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &n bsp; &nbsp;&nbsp;&nbsp;&n bsp;&nbsp;&nbsp; 


<a href =»gallery.hm|»>رgصږڏ معرض‎ </a> 
</font> 
<br> 


<Dr> 


<hا>‎ 


<font color=»VV#aacc»><b> 


.من اکون؟؟ 


</b> 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &n bsp; &nbsp;&nbsp;&nbsp;&n bsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &n bsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&n bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n bsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n bsp; 

</font> 

</h)> 

</center> 

<P> 

<font size=»0»> 

<ul type=»disc»> 

<أا/>معلومات عامة<ذا> 

<ol type=»)»> 

<أا/> الاسم : النمر المقنع <أا> 

<أا/> السن: مليون سنة <أا> 

<أا/> العنوان: حلبة المصارعة <أا> 


</ol> 


<li> 
<آا/>اختصاصات وخبرات‎ 
<ol type=») »> 


<أا/> (احب المصارعة كثيرا فحلمي ان اصبح اول مصارع في العالم(امزح انا شخص مسالم جدا ههه <أا> 


متخصص في الصحافة. اكتب مقالات عن المصارعيين والمقاتلين الاقوياء والضعفاء ايضا .. الاقوياء منحهم الشهرة والضعفاء اضحك <أا> 


لدي خبرة في سياقة السيارات ولو اني #املك رخصة. اصل شرطي المرور بتاعنا سحبها مني بسبب جاوزي للضوء الاأحمر وقد فعلت ذلك <أا> 


بعد ذلك نسجل الصفحة (ctrl+s)‏ 


نفس الشيء نفعله مع الصفحة الثالثة ونغير فيها حسب مانريده نحن ان يكون في محتوى الصفحة. 


<أا/> لاني #احتاج الى اضوء اشارة المرور فانا شخص بارع كما تعلمون 


</ol> 


<آا/>المواهب<اا> 

<ol type=»1»> 

<أا/> كرة القدم <ذا> 

<أا/> اللصارعة <أا> 

<أا/> الرسم فوق الرمال <أا> 
</li>‏ الجري وراء الاشرار <أا> 


</ol> 
<ul> 


بتاع واحد مسطول ۷ء کان هذا 


</font> 
</p> 


</body> 


</html> 


كود اhim:‏ 


<html dir=»rtl»> 

<head> 

<هااا/> دورة علمني كيف اثقن لغة اش تي ام ال <٥اازا>‏ 
</head>‏ 


<body> 

<center> 

<img src=»image).png»> 
<br><br><br> 

<font size=»l» > 

<a href=»home.htm|»>ةيwښسيأرنا</a>‎ 


&nbsp;&nbsp;&nbsp;&n bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n bsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 


<a href=»biography.hm|»>ةèيرعت‎ ةقlطب</a>‎ 
&nbsp;&nbsp;&nbsp;&n bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &n bsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 


<a href =»gallery.hm|»>رgصږڏ معرض‎ </a> 
</font> 
<br> 


<Dr> 


<hا>‎ 
<font color=»VV#aacc»><b> 


:صور مأخوذة من مواقع مختلفة 


</b> 

&nbsp;&nbsp;&nbsp;&n bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n bsp; &nbsp;&nbsp;&nbsp;&n bsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&n bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &n bsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n bsp; &nbsp;&nbsp;&nbsp;&n bsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n bsp;&nbsp;&nbsp; 

</font> 

</h)> 

<P> 

<font size=»0»> 
<img src=»images/img).jpg» width=» 1+ °» heighi=» f ** »> 

<Dr> 

الصورة :١‏ طبيعة جميلة 

<Dr> 


<img src=»images/img 1.jpg» width=»1* °» heighi=»1** »> 
<Dr> 
الصورة ۶ بحر‎ 


<br> 


<img src=»images/imgT.jpg» width=»1* °» heighi=» 1° ° »> 
<Dr> 

الصورة :١‏ وردة صفاء 

<Dr> 


<img src=»images/img4.jpg» width=»1* °» heighi=» f °° »> 
<Dr> 
<Dr> 


</font> 


</center> 
</body> 


</html> 


ولاحظ اننا في جميع الصفحات احتفظنا بالقائمة الرئيسة الخاصة بالروابط -حتى يمكننا التنقل والعودة من صفحة الى اخرى- . والذي يتغيير 
هو الحتوى فقط. 
كان هذا تطبيقا بسيطا حاولت من خلاله جمع بعض الاشياء المهمة والتطرق للامور المهمة مع حدود ماتوصلنا اليه لحد الان من خلال دورتنا. 


الدرس السادس 


الجدول هو عبارة عن خانة او مجموعة من الخانات التي نضصع فيها نصوص او صور او فرغات (يعني نترك الخانات فارغة) .. وهي توفر لنا امكانية 
قوية جدا في بناء موقع تابث وبالتموضوعات التي نريدها للمحتوى. 

وهاته صورة لمثال حتى تفهم ماذا اقصد: 

=) كيف إذن نحصل على الجداول؟؟ 


الصغية العامة لوسم الجدول في ٣۳١‏ هي: 


:hiصا كود‎ 
<table> 
<İr> 
<td></td> 
<Ir/> 
<table/> 
بمثل السطر‎ ۲١ حيث‎ 
ول خانة‎ 


طبعا اذا حاولنا كتابة الوسم السابق لن يظهر لنا شيء ننا قمنا برسم جدول يتكون من خانة واحدة فارغة ليس بها اي محتوى ولم نحدد 
الجوانب حتى تظهر حدود الخانة + لم نعطي اي خصائص اخرى للخانة. 


طيب لنجرب التالي: 
كود اhim:‏ 


<table> 

<İr> 
<td>nom:</td> 
<td>alflash</td> 
<I> 


<İr> 
<td>age:</td> 
<id>4 ans</td> 
<I> 


</table> 


non: alflash 


age: Pans 


خصائص الجدول: 


اول خاصية سنتعرف عليها هي خاصية الجوانب او الحدود: 
٭«ظهار الحدود نستعمل الامرالتالي داخل واسم الجدول ھهکذا: 


كود اhim:‏ 


<table border=”)”> 
في حالة لم نحدد سمك البوردر.‎ ٠ والقيمة الافتراضية هي‎ 


الخاصية التالية: 
فاضي الحرض والطول ,حبذ کان کم فی غر ول اول سنت انیم اتی تر 
كود اhim:‏ 


<table border=»)» width=» °°» height=»0** »> 

ليس هذا فقط بل مكننا ايضا ان نتحكم فى مساحة الخانة : 

كود اhim:‏ 

<td width=»)۰ ۰» height=»V* »> 

مع ملاحظة ان جميع الخانات التي توجد خث هاته الخانة التي قمنا بتحديد مساحتها سوف حمل نفس قيمة المساحة . فنحن هنا داخل 
جدول. 


الخاصية التالية التي مكنناان نضيف. هي خاصية لون الجدول : 
کود 


<table border=»)» width=»1* °» height=»0۰ ۰» bgcolor=»blue»> 


ايضا مككنا ان نحدد لون الخانات . تطبيق: 


كود اصhi:‏ 


<table border=») »> 

<İr> 

<td width=»1۰۰» bgcolor=»red»><font size=V>nom:</font></td> 
<td width=»1۰۰» bgcolor=»blue»><font size=V>alflash</font></td> 


<tr> 

<İr> 

<td bgcolor=»green»><font size=V>age:</font></td> 

<td bgcolor=»444444#»><font size=4<V ans</font></td> 
<I> 


</table> 


الكود اعلاه سيعطينا النتيجة التالية: 


ومن الخصائص ايضا التي نستطيع اعطاها لجدولنا : موضع الحتوى داخل الخانة . 


لنفترض انه لدينا خانة في جدول مساحتها كبيرة ونريد ان نضع محتوى (نص. صورة...) بداخل هاته الخانة في اعلى الخانة او في الوسط او جهة 
اليمين في الاسفل ... 

هنا نستعمل داخل وسم الخانة ك الأمرين : واه و «وأاة۷ الأول يتحكم افقيا والثاني عموديا 

والقيم المسموح اعطائها لهذين الامرين هي: 

بالنسبة ل ١‏ واج فيمكن ان يساوي center ; rig ht; left‏ 

valign :top; middle; bottom —Û ةبسنllب اما‎ 


:him۱ كود‎ 


<td width=»1° ۰» height=»1° °» align=»center» valign=»middle»>ygتi>l‎ </td> 


صورة توضيحية للتطبيق السابق بعد إضافة هذا الوسم عليه 
سوف يكون موضع الحتوى في الخانة في الوسط افقيا وعموديا 


الدرس السابع 


الجداول 


الجزء الثانى 


تعرفنا في الجزء الأول على ماهي الجداول وكيفية استخدامها. ثم عرفنا ايضا بعض الخصائص الخاصة بها 
التي ساعدتنا في التحكم في الجداول . الان سنضيف خصائص اخرى مرتبطة بالجداول. 


خاصية : جعل صورة مثابة خلفية لجدول٣-‏ 
اعتمادا على ماسبق حاول ان تكتشف هل بمككنا ان جعل صورة هي مثابة خلفية لجدول معين؟ 


كان هذا احد الاسئلة التي طرحت في الدرس السابق. فكيف هو السبيل لمعرفة الجواب 
ببساطة سنكتب في وسم بداية الجدول: 


كود اhi۳:‏ 


<table border=»)» background=»image.jpg»> 
هو اسم وصيغة الصورة‎ |٣4 حيث ومز.98‎ 


كما ممكنناايضاان جعل كل خانة بخلفية: 
<table border=») »>‏ 
<İr>‏ 
<td width=»)۰۰» background=»image).jpg»><font size=V>nom:</font></td>‏ 
<td width=»1۰۰» background=»imageT.jpg»><font size=V>alflash</font></td>‏ 


<tr> 

<İr> 

<td><font size=V background=»imager.jpg»>age:</font></td> 
<td ><font size=V background=»image.jpg»>4 ans</font></td> 
<tr> 

</table> 


من الخصائص المفيذة جدا والتي تسمح لنا بجمع عدد معين من الخانات في خانة واحدة افقيا. 
نأخذ مثال لتوضيح الامر 


table name 


name | name2 


کما نلاحظ في الصورة ان الخانة الاولى قد اخدت مساحة خانتين افقيا. وذلك مرتبط بعدد الاأعمدة التي نرید ان تشملها colspan‏ 
والاجاه يکون من الاعلى نحو الاسفل ولیس من الاسفل نحو الاعلى 
وطريقة كتابة الكود هي: 


كود اhim:‏ 


<table border=») »> 

<İr> 

<td width=»£۰۰» colspan=»f» align=»center»><font size=V>table name</font></td> 
<I> 

<tr align=»center»> 

<td><font size=V>name)ا</font></td>‎ 

<td ><font size=V>name </font></td> 

<I> 


</table> 


مثال :١‏ سنحاول الحصول على مثل هذا الجدول: 


table name table name 
name l name2 name l name2 


منتدیات ضوء الفلاش 


كود اhim:‏ 


<table border=») »> 

<İr> 

<td width=»£۰۰» colspan=»f» align=»center»><font size=V>table name</font></td> 
<td width=»£۰۰» colspan=»f» align=»center»><font size=V>table name</font></td> 
<I> 

<tr align=»center»> 

<td><font size=V>name)</font></td> 

<td ><font size=V>name </font></td> 

<td><font size=V>name)</font></td> 

<td ><font size=V>name </font></td> 

<I> 


</table> 
rowspan :ãيصlخ‎ 
جمع عدد من الخانات في خانة واحدة عموديا‎ P37 غير ان‎ ٥0154١ تشبه‎ 


لنأخذ مثال نستوعب به كيفية عمل :۲0W8P37١‏ 
كما نلاحظ في الصورة التالي: 


name | 


table name 
name2 


فلقد اخذت الخانة الثانية في السطر الاول مساحة خانتين عموديا . والكود الخاص بعمل ذلك هو: 
كود اhim:‏ 


<table border=”)”> 

<İr> 

<td width=”)0۰” align=”center”><font size=V>name)</font></td> 

<td width=’ 1۰” rowspan=”1” align=”center”><font size=V>table name</font></td> 
<I> 

<tr align="center’”> 

<td><font size=V>name 1</font></td> 

<tr> 


</table> 


قد ينتابك احساس بعدم الفهم جيدا. لكن ان حاولت مراجعة ماتطرقنا اليه الان وتطبقه مرارا وتكرار سيزيل ان شاء الله كل الغموض 
بالتوفيق. 


الاسثمارة او مايطلق عليه ب ءِrَFormulai‏ 


الوقت مر اصدقائي . وكذلك في دروسنا , اظن تعرفنا على الكثير لحد الان ورما بدأنا نصل الى حدود هاته اللفة. 
هل قلت شيئا مهما .. ااعتقد ذلك 


لنتحدث بجدية اكبر. فعلافي ا٣‏ هناك حدود #بمكن لهاته اللغة ان تتجاوزها وهنا سنضطر الى الاستعانة بلغات وتقنيات اخرى 
حتى نخلق موقعا جذابا ومتكاملا : _موقع خارق_ 


رما اردت ا«شارة حاليا الى ان ما ê‏ الوصول اليه لحدالان في الدورة يجعلكم جيدين في هاته اللغة وتستطعون برمجة مواقع شخصية خاصة 
نكم بض جما نكن اغلهعا إن انطوة مازال موا وتن مارا قي نداب الوا 
_على فكرة انا الخدث مع الناس الذين لديهم اهتمام بالامر والذين يرغبون في ان يصبحوا مبرمجي مواقع في المستقبل._ 


اليوم ان شاء الله سنتحدث عن الاسثمارات . واليكم فكرة معنى الاسثمارة: نفترض لديك موقع شخصي على النت. وخب ان يقوم زوار 
موقعك . او عملائك بان يكون لديهم وسيلة للاتصال بك للافاذة بارائهم و اقترحاتهم . او طلباتهم... 

هنا انت تقوم بانشاء صفحة خاصة بهم ختوي على حقول (خانات) تطلب منهم ملئھا كک: 

الاسم: 

العنوان: 

الموضوع: 

الرسالة: 


وبعد ذلك عندما يقمون ملي هاته الأسثمارة سيقمون بارسالها اليك . 
الى اين؟؟؟ وكيف ؟؟ ليس من اختصاص "1٣١|‏ (حدود اhtm(‏ 


وكخلاصة او كتعريف نخرج به من خلال المثال هو ان 

الأسثمارة عبارة عن حقول(خانات) نطلب من المستخدم او الزائر ملئها في حالة رغبنا في خلق اتصال بيننا وبينه 
وقد جد هاته الاسثمارة في العديد من المواقع والعديد من الاستخدمات 

كمثال . يتم استخدمها في ارسال رسالة خاصة الى صاحب الموقع. 


فاهلا وسهلا بكم في عالم الاسثمارات. عالم حقول الكتابة . واللوائح والازرار 
تتحدد الاسثمارة من خلال تلاث عناصر: 

- أUuم"ا:‏ حقل له مساحة لكتابة نص او لجعله زر 

-اهاهء: اللوائح التي تسمح بالاختيار 

-e2اaاexا:‏ مساحة لكتابة نص بحرية اكبر من النوع الاول 


وتكتب على هذا الشكل: 


:himا كود‎ 
<hF> 


السلام علیکم كيف الخال نرجوا ملىئ الاسثمارة التالية 
>/< 


<form> 


<م/>.حاليا لايوجد شيء مطلوب ملؤه الاسثمارة الطلوب ملئهاهنا مكانها<م> 
</form>‏ 


<م/>شکرا لكکم<م> 


هذا هو الشكل العام لكتابة اسثمارة حيث ان الاسثمارة تبتداً بوسم >0۲١<‏ 
وتنتهي بوسم 

</form> 

التي سترسل بها هاته المعلومات. وهذا خارج نطاق ا٣"‏ 

وستصبح الصيغفة العامة لكتابة اسثمارة هي: 

كود اصhi:‏ 


<hf> 
السلام عليكم كيف الحال نرجوا ملىئ الأسثمارة التالية‎ 
</> 
<form method=»post» action=»page_ php.php»> 
ايوجد شيء مطلوب ملؤه الاسثمارة المطلوب ملئها<م>‎ ايلاح.>/P<‎ 
</form> 


<م/>شکرا لكکم<م> 
الان بقى لناان نعرف ماذا يكتب فى داخل الاسثمارة ؟؟.. 
سبق لنا وقلنا ان الاسثمارة هي عبارة عن حقول. لوائح وازرار. وما سنعلمها الان هو كيفية ادراج هاته الحقول واللوائح والازرار 


input -۱‏ 
- لانشاء حقل خاص بكتابة نص نستعمل : 
<input type=»text» name=»un_text»>‏ 
- لانشاء حقل خاص بكتابة رقم سري حيث سيكون هذا الاخير مشفرا: 
<input type=»pasword» name=»un_mot_d_ pass»>‏ 
- لانشاء زر اختيار على شكل مربع: 
<input type=»checkbox» name=»chois»>‏ 
- لأنشاء زر اختيار وجعله مختارا مسبقا: 
<input type=»checkbox» «checked» name=»un_ chois»>‏ 
- لانشاء زر اختيار على شكل قرص: 
<input type=»radio» name=»sixe» value=»F»>‏ 
- #نشاء زر للعودة الى شكل الاسثمارة الول : 
<input type=»reset» name-=»effacer» value=»effacer»>‏ 
-انشاء زر ارسال الاأسثمارة: 


<input type=»reset» name=»envoyer» value=»envoyer»> 


select -1 
عمل ائحة اختيار:‎ - 
<select name=»menu»> 
<option> Maroc 
<option> Algerie 
<option> Tunisie 
<option> Libye 
<option> Mauritanie 
</select> 


- لجعل اسما من اسماء لائحتنا هو الخيار الحدد جعله هكذا: 
<option selected> Maroc‏ 


- لمد طول حقل اللائحة : 


<select name=»menu» size=» f »> 


-«ظهار محتوى اللائحة كاملا: 
<select name=»menu» multiple>‏ 


:textarea - ۳ّ‏ 
لعمل حقل للكاتبة ذو مساحة نستخدم هذا الوسم: 


<textarea name=»commentaire» rOWS=»)*» COls=»£*» > 


اكتب رسالتك هنا من فضلك 


</textarea> 


اظن هذا کل مايتعلق بوسوم الاستمارات او النماذج بقي نا ان نضصع تطبيق بسیط جامع لكل مارأیناه في درسنا اليوم حتی يتم الاستعاب ان 


شاء الله. 


التطبيق: هذا تطبيق لستمارة بسيطة: 
كود اhim:‏ 


<html dir=»rtl»> 

<head> 

<İi{|e< السثمارات‎ >tiااe<‎ 

</head> 

<body> 

<م/> السلام عليكم المرجوا ملىئ الاسثمارة التالية <م> 


<form method=»post» action=»page_php.php»> 
<label> p۾w*|‎ : </label> 

<br> 
<input type=»text» name=»nom»> 


<br> 


<امطها/> : الرقم السري <اعطها> 
<br>‏ 


<input type=»password» name=»pW»> 


<Dr> 


<label> رSذ‎ : </label> 

<input type=»radio» name=»sixe» value=» M»> 

<br> 

>labe|> انٿ‫‎ : >/اab‎ e< 

<input type=»radio» name=»sixe» value=»F»> 

<br> 

<م/>مشروباتك المفضلة من بين المشروبات التالية: حدد <0> 
</label>‏ :حلي <label>‏ 

<input type=»checkbox» name=»chois)»> 


>اaطeا< شاي‎ : >/اa‎ e< 

<input type=»checkbox» name=»chois »> 
>labطeا< <اعطها/> : القهوة‎ 

<input type=»checkbox» name=»chois »> 


<اعطها/> : عصير ليمون <اعطها> 
<input type=»checkbox» «checked» name=»chois 1 »>‏ 


>اaطعا< طھا/> : لبن طازج‎ ٤1< 
<input type=»checkbox» name=»chois T»> 


<Dr> 


<select name=»menu»> 
<option selected> Maroc 
<option> Algerie 
<option> Tunisie 
<option> Libye 

<option> Mauritanie 
<option> Autres 
</select> 


<Dr> 


<اعطاها/> اأكتب فى بضعة اسطر عن سيرتك الذاتية <اعطجا> 
<Dr> ٠‏ 

<textarea name=»commentaire» rOWS=»)*» COls=»£*» > 
</textarea> 


<Dr> 
<input type=»reset» name=»effacer» value=»slill»> 
<input type=»reset» name=»envoyer» value=» Jlwرl»>‎ 


</form> 


<م/> عند اتمام ملىئ الاسثمارة المرجوا الضغط على زر الارسال. للرجوع الى الالغاء المرجوا الضغط على زر الالغاء وشكرا <م> 
</body>‏ 
</html>‏ 
كان هذا هو تطبيق درسنا المرجوا محاولة اعادة كتابته وتطبيقه حتى تلاحظوا النتيجة . 


تم بحمد لله الانتهاء من اعداد وتقدم دروس ٣)۳۱‏ . 


اخوكم في الله 
ياسین ابوالشريف 
من المملكة المغربية 


وطبعا في حالة وجود اي استفسار او شيء معي 
مکنكم 

التواصل معي عبر الا ميل التالي 

yalsne@hotm ail.com 

عبر الهاتف: 

TITIVT0۳11 ۰0۵ 


